<script setup>
// No props or state needed for now
</script>

<template>
  <div class="instructions">
    <p><strong>操作说明：</strong></p>
    <ul>
      <li>点击选择节点，按住Ctrl键可以多选两个节点进行连接</li>
      <li>拖拽移动节点</li>
      <li>双击编辑节点文本</li>
      <li>选中节点后按 Enter 添加子节点</li>
      <li>选中节点后按 Delete 删除节点</li>
      <li>按住空格键+鼠标左键拖动画布</li>
      <li>使用鼠标滚轮缩放画布</li>
    </ul>
  </div>
</template>

<style scoped>
.instructions {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.instructions p {
  margin: 0 0 10px 0;
  font-size: 16px;
}

.instructions ul {
  margin: 0;
  padding-left: 20px;
}

.instructions li {
  margin: 5px 0;
  color: #666;
}
</style>